<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		input{border:none;}
		div{width:100px;height:100px;border:2px solid blue;display:none;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//获取按钮   div
			var oBtn=document.getElementsByTagName("input");
			var oDiv=document.getElementsByTagName("div");
			//初始化
			oDiv[0].style.display="block";
			//遍历每个按钮
			for(var i=0;i<oBtn.length;i++){
				//给每个按钮添加索引值
				oBtn[i].index=i;
				//给没按钮添加事件
				oBtn[i].onmouseover=function(){
					//oBtn[i].index=i;   索引值不在这里加，添加索引值是为了把oBtn的下标传递到函数中去，函数中的oBtn无法跳过函数获取下标
					//for循环是为了让所有按钮，div初始化,即消除变过色的按钮以及显示出来的div
					for(var j=0;j<oBtn.length;j++){
						oBtn[j].style.background="";
						oDiv[j].style.display="none";

					}
					//在按钮 div初始化过后，设置变化后的样式，这样在每次函数执行时，都会先初始化，去掉操作过后按钮的影响
					oBtn[this.index].style.background="red";
					oDiv[this.index].style.display="block";

				}


			}



		}

	</script>
</head>
<body>
	<input type="button" value="按钮一">
	<input type="button" value="按钮二">
	<input type="button" value="按钮三">
	<input type="button" value="按钮四">
	<input type="button" value="按钮五">
	<div>内容一马当先</div>
	<div>内容二话不说</div>
	<div>内容三头六臂</div>
	<div>内容四</div>
	<div>内容五</div>
</body>
</html>